<template>
  <view class="notLoggedIn register">
    <view class="title">
      <image @tap="goBack(1)" src="@/static/image/10.png" mode="widthFix" />
      <language />
    </view>
    <view class="com">
      <view>
        <view>立即註冊</view>
        <view>請輸入註冊相關信息</view>
      </view>
      <view>
        <view class="t1">
          <up-input
            placeholder="請輸入郵箱"
            v-model="user_name"
            clearable
            border="none"
          ></up-input>
        </view>
        <view class="t3"  v-if="Register_Verification_Code">
          <up-input
            placeholder="請輸入驗證碼"
            v-model="verification_code"
            clearable
            border="none"
          >
            <template #suffix>
              <text @tap="getCode">{{ tips }}</text>
            </template>
          </up-input>
        </view>
        <view class="t2">
          <up-input
            placeholder="請輸入登錄密碼（字母+數字）"
            v-model="pass_word"
            clearable
            :password="!showPsw"
            border="none"
          >
            <template #suffix>
              <i
                @tap="showPsw = !showPsw"
                :class="showPsw ? 'open' : 'eye'"
              ></i>
            </template>
          </up-input>
        </view>
        <view class="t2">
          <up-input
            placeholder="請再次輸入（字母+數字）"
            v-model="again_pass_word"
            clearable
            :password="!againShowPsw"
            border="none"
          >
            <template #suffix>
              <i
                @tap="againShowPsw = !againShowPsw"
                :class="againShowPsw ? 'open' : 'eye'"
              ></i>
            </template>
          </up-input>
        </view>
        <view class="t4" v-if="Register_Id_No ">
          <up-input
            placeholder="請輸入邀請碼"
            v-model="id_no"
            clearable
            border="none"
          >
          </up-input>
        </view>
      </view>
      <view class="btn">
        <up-button
          :disabled="!(pass_word && user_name &&again_pass_word && (Register_Verification_Code?verification_code:true)) "
          text="注冊"
          @tap="UserRegisterFn"
          type="primary"
        ></up-button>
      </view>
      <view
        class="agreement"
        @tap="isAgreement = !isAgreement"
        :class="{ active: isAgreement }"
      >
        我已閱讀並同意<text @tap.stop>《服務條款》</text>和<text @tap.stop
          >《隱私政策》</text
        >
      </view>
      <view class="fot">
        已有帳號？<text @tap="goTo('/pages/notLoggedIn/login')">立即登錄</text>
      </view>
    </view>
    <up-code :seconds="seconds" @change="codeChange" ref="uCodeRef"></up-code>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { UserRegister, SendRegisterVerificationCode } from "@/api/UserApi";
import { RegisterConfig } from "@/api/SystemApi";

const instance = getCurrentInstance()?.appContext.config.globalProperties;
let Register_Id_No = ref<boolean>(false);
let Register_Verification_Code = ref<boolean>(false);
RegisterConfig().then((e)=>{
  Register_Id_No.value=e.Register_Id_No
  Register_Verification_Code.value=e.Register_Verification_Code


})

// 注冊
let showPsw = ref<boolean>(false);
let againShowPsw = ref<boolean>(false);
let isAgreement = ref<boolean>(true);
let user_name = ref<string>();
let pass_word = ref<string>();
let again_pass_word = ref<string>();
let verification_code = ref<string>();
let id_no = ref<string>();
const UserRegisterFn = async () => {
  if (!isAgreement.value) {
    uni.showToast({ title: "請勾選服務條款", icon: "none" });
    return;
  }
  if (pass_word.value != again_pass_word.value) {
    uni.showToast({ title: "兩次密碼輸入不一致", icon: "none" });
    return;
  }
  UserRegister({
    user_name: user_name.value,
    pass_word: instance?.getRsaCode(pass_word.value),
    verification_code: verification_code.value,
    id_no: id_no.value,
    loading: 1,
  });
};

// 獲取驗證碼
const tips = ref("");
const seconds = ref(60);
const uCodeRef = ref<any>(null);
const codeChange = (text: any) => {
  tips.value = text;
};
const getCode = async () => {
  if (uCodeRef.value?.canGetCode) {
    uni.showLoading({
      title: "正在获取验证码",
    });
    await SendRegisterVerificationCode({
      user_name: user_name.value,
    });
    uni.hideLoading();
    uni.showToast({ title: "验证码已发送", icon: "none" });
    uCodeRef.value.start();
  }
};
</script>
<style scoped lang="scss">
@import "../../static/scss/notLoggedIn.scss";
</style>
